<template>
  <div class="editaddress">
    <van-form @submit="save" @click.prevent="clickHanlder">
      <van-cell-group>
        <van-field
          v-model="value1"
          clearable
          label="姓名"
          required
          :rules="[{ required: true, message: '请填写收货人姓名' }]"
          right-icon="warning-o"
          placeholder="收货人姓名"
        />
        <van-field
          v-model="value2"
          clearable
          label="电话"
          required
          :rules="[{ required: true, message: '请填写收货人电话' }]"
          type="tel"
          size="11"
          placeholder="收货人电话"
        />
        <van-field
          v-model="value3"
          clearable
          label="地区"
          required
          readonly
          placeholder="选择省 / 市 / 区"
          :rules="[{ required: true, message: '请选择地区' }]"
          @click="onClick"
        >
          <template #button>
            <van-icon name="arrow" />
          </template>
        </van-field>
        <van-field
          v-model="value4"
          clearable
          label="详细地址"
          :rules="[{ required: true, message: '请填写详细地址' }]"
          required
          placeholder="街道门牌、楼层房间号等信息"
        />
      </van-cell-group>
      <van-field readonly clearable label="是否默认">
        <template #button>
          <van-switch v-model="checked" />
        </template>
      </van-field>
      <van-button type="danger" native-type="submit" block round>{{subtxt}}</van-button>
    </van-form>
    <van-button @click="del" v-if="delshow" block round>删除</van-button>
    <van-popup v-model="show">
      <van-picker
        show-toolbar
        title="标题"
        delshow="true"
        @confirm="onConfirm"
        @cancel="onClick"
        :columns="columns"
        ref="picker"
      />
    </van-popup>
  </div>
</template>

<script>
import {
  GetAddressList,
  AddAddres,
  DelAddres,
  GetAddressOne
} from "@/request/api";
import areaList from "@/util/area.json";

export default {
  created() {
    if (this.$route.params.id != "add") {
      this.delshow = true;
      this.subtxt = "保存";
      GetAddressOne({ id: this.$route.params.id }).then(res => {
        this.value1 = res.data.name;
        this.value2 = res.data.mobile;
        this.value3 = res.data.full_region;
        this.value4 = res.data.address;
        this.checked = res.data.is_default == 1 ? true : false;
      });
    }
  },

  data() {
    return {
      show: false,
      delshow: false,
      subtxt: "添加",
      list: areaList,
      city_id: 0,
      checked: false,
      district_id: 0,
      province_id: 0,
      value1: "",
      value2: "",
      value4: "",
      value3: "",
      columns: areaList
    };
  },
  methods: {
    onClick() {
      this.show = !this.show;
    },

    onConfirm(value, index) {
      // 设置省市区id index返回的是一个数组分别是3列的索引值
      this.province_id = this.columns[index[0]].id;
      this.city_id = this.columns[index[0]].children[index[1]].id;
      this.district_id = this.columns[index[0]].children[index[1]].children[
        index[2]
      ].id;
      this.value3 = `${value[0]} / ${value[1]} / ${value[2]}`;
      this.show = false;
    },
    save(e) {
      let data = {
        address: this.value4,
        city_id: this.city_id,
        district_id: this.district_id,
        province_id: this.province_id,
        mobile: this.value2,
        name: this.value1,
        is_default: this.checked
      };
      AddAddres(data).then(res => {
        if (res.errno == 0) {
          this.$toast.success("添加成功");
          this.$router.push("/user/address");
        }
      });
    },
    del() {
      let id = this.$route.params.id;
      DelAddres({ id }).then(res => {
        if (res.errno == 0) {
          this.$toast.success("删除成功");
          this.$router.push("/user/address");
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.editaddress {
  /deep/.van-popup--center {
    width: 100vw;
  }
  /deep/.van-switch__node {
    width: 40%;
    height: 100%;
  }
  /deep/.van-switch--on .van-switch__node {
    -webkit-transform: translateX(2.55555555555em);
    transform: translateX(2.55555555555em);
  }
  /deep/.van-button--block {
    width: 90%;
    margin: 10% 5% 0;
  }
}
</style>